<template>
	<div>
		<Header></Header>
		<ul class="ul1">
			<li>
				<img :src="require('../../assets/huo_meSon/12.jpg')" alt="" />
				<p>通关宝典</p>
			</li>
			<li>
				<img :src="require('../../assets/huo_meSon/12.jpg')" alt="" />
				<p>学习法则</p>
			</li>
			<li>
				<img :src="require('../../assets/huo_meSon/12.jpg')" alt="" />
				<p>通关技巧</p>
			</li>
		</ul>
		<ul class="ul2">
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/14.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>学UI网—UI设计师学习教程平台</h4>
					<p>
						B端后台产品UI设计的工作小结,总结一些常见问题、解决方法以及自己的经验。希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解...
					</p>
					<div><span>2020年02月03日</span><button>最新</button></div>
				</div>
			</li>
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/14.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>学UI网—UI设计师学习教程平台</h4>
					<p>
						B端后台产品UI设计的工作小结,总结一些常见问题、解决方法以及自己的经验。希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解...
					</p>
					<div><span>2020年02月03日</span><button>最新</button></div>
				</div>
			</li>
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/14.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>学UI网—UI设计师学习教程平台</h4>
					<p>
						B端后台产品UI设计的工作小结,总结一些常见问题、解决方法以及自己的经验。希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解...
					</p>
					<div><span>2020年02月03日</span><button>最新</button></div>
				</div>
			</li>
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/14.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>学UI网—UI设计师学习教程平台</h4>
					<p>
						B端后台产品UI设计的工作小结,总结一些常见问题、解决方法以及自己的经验。希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解...
					</p>
					<div><span>2020年02月03日</span><button>最新</button></div>
				</div>
			</li>
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/14.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>学UI网—UI设计师学习教程平台</h4>
					<p>
						B端后台产品UI设计的工作小结,总结一些常见问题、解决方法以及自己的经验。希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解...
					</p>
					<div><span>2020年02月03日</span><button>最新</button></div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import Header from '../../components/Header'
export default {
	components: {
		Header,
	},
}
</script>

<style scpoed lang="scss">
.ul1 {
	width: 100%;
	padding: 10px 0 3px;
	margin: 0 0 10px;
	background: white;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #eee;
	li {
		width: 33.33%;
		height: 75px;
		text-align: center;
		img {
			width: 50px;
			height: 48px;
		}
		p {
			width: 100%;
			height: 30px;
			line-height: 30px;
		}
	}
}
.ul2 {
	width: 100%;
	li {
		width: 100%;
		height: 90px;
		box-sizing: border-box;
		padding: 5px 10px;
		margin: 0 0 2px;
		display: flex;
		justify-content: space-between;
		.left {
			width: 110px;
			height: 80px;
			border: 1px solid #eee;
			box-sizing: border-box;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.right {
			width: 240px;
			height: 100%;
			h4 {
				height: 20px;
				line-height: 20px;
				font-size: 14px;
				color: #333;
				overflow: hidden;
			}
			p {
				height: 35px;
				line-height: 17px;
				font-size: 12px;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			div {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				span {
					margin: 0 5px 0 0;
				}
				button {
					width: 40px;
					height: 16px;
					line-height: 18px;
					background: #ec482d;
					color: white;
					outline: none;
					border: none;
					margin: 4px 0;

					border-radius: 8px;
				}
			}
		}
	}
}
</style>